{% extends 'base_tabler.html' %} {% block title %}数据分析平台 - 首页{% endblock %} {% block content %}
<!-- 顶部横幅 -->
<div class="page-header d-print-none">
  <div class="container-xl">
    <div class="row align-items-center">
      <div class="col">
        <div class="page-pretitle">欢迎使用</div>
        <h2 class="page-title">青少年社交网络可视化分析系统</h2>
      </div>
    </div>
  </div>
</div>

<!-- 页面主体 -->
<div class="page-body">
  <div class="container-xl">
    <!-- 平台介绍部分 -->
    <div class="row mb-4">
      <div class="col-md-6">
        <div class="card" style="height: 100%">
          <div class="card-body">
            <h3 class="card-title">平台介绍</h3>
            <p class="text-muted">
              本数据分析平台是一套全面的用户数据分析工具，帮助您深入理解用户行为、兴趣偏好和个性特征。
              通过多维度的数据可视化和相关性分析，让您的数据更具价值和洞察力。
            </p>
            <p>
              平台基于先进的数据处理技术和可视化框架，为用户提供直观、易用的分析体验。
              无论您是数据分析师、市场专员，还是产品经理，本平台都能满足您对数据洞察的需求。
            </p>
          </div>
        </div>
      </div>
      <div class="col-md-6">
        <div class="card">
          <div class="card-body">
            <h3 class="card-title">系统特点</h3>
            <ul class="list-unstyled">
              <li class="py-1">
                <div class="d-flex align-items-center">
                  <div class="avatar bg-blue text-white rounded me-3">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      class="icon"
                      width="24"
                      height="24"
                      viewBox="0 0 24 24"
                      stroke-width="2"
                      stroke="currentColor"
                      fill="none"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                    >
                      <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                      <path d="M9 11l3 3l8 -8"></path>
                      <path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9"></path>
                    </svg>
                  </div>
                  <div><strong>直观分析</strong>：通过图表直观展示数据，一目了然</div>
                </div>
              </li>
              <li class="py-1">
                <div class="d-flex align-items-center">
                  <div class="avatar bg-green text-white rounded me-3">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      class="icon"
                      width="24"
                      height="24"
                      viewBox="0 0 24 24"
                      stroke-width="2"
                      stroke="currentColor"
                      fill="none"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                    >
                      <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                      <path d="M9 11l3 3l8 -8"></path>
                      <path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9"></path>
                    </svg>
                  </div>
                  <div><strong>多维分析</strong>：从多角度分析用户特征和行为</div>
                </div>
              </li>
              <li class="py-1">
                <div class="d-flex align-items-center">
                  <div class="avatar bg-purple text-white rounded me-3">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      class="icon"
                      width="24"
                      height="24"
                      viewBox="0 0 24 24"
                      stroke-width="2"
                      stroke="currentColor"
                      fill="none"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                    >
                      <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                      <path d="M9 11l3 3l8 -8"></path>
                      <path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9"></path>
                    </svg>
                  </div>
                  <div><strong>相关性挖掘</strong>：发现隐藏在数据背后的关联关系</div>
                </div>
              </li>
              <li class="py-1">
                <div class="d-flex align-items-center">
                  <div class="avatar bg-red text-white rounded me-3">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      class="icon"
                      width="24"
                      height="24"
                      viewBox="0 0 24 24"
                      stroke-width="2"
                      stroke="currentColor"
                      fill="none"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                    >
                      <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                      <path d="M9 11l3 3l8 -8"></path>
                      <path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9"></path>
                    </svg>
                  </div>
                  <div><strong>权限管理</strong>：灵活的用户角色和权限控制</div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>

    {% if request.user.is_authenticated %}
    <!-- 以下内容只有登录用户才能看到 -->
    <!-- 功能展示部分 -->
    <div class="row mb-4">
      <div class="col-12">
        <h2 class="mt-3 mb-4">主要功能</h2>
      </div>
      <div class="col-sm-6 col-lg-3">
        <div class="card card-sm">
          <div class="card-body">
            <div class="row align-items-center">
              <div class="col-auto">
                <span class="bg-blue text-white avatar">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-chart-pie"
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    stroke-width="2"
                    stroke="currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                    <path
                      d="M10 3.2a9 9 0 1 0 10.8 10.8a1 1 0 0 0 -1 -1h-6.8a2 2 0 0 1 -2 -2v-7a.9 .9 0 0 0 -1 -.8"
                    ></path>
                    <path d="M15 3.5a9 9 0 0 1 5.5 5.5h-4.5a1 1 0 0 1 -1 -1v-4.5"></path>
                  </svg>
                </span>
              </div>
              <div class="col">
                <div class="font-weight-medium">基础统计分析</div>
                <div class="text-muted">年龄、性别等基本数据统计</div>
              </div>
            </div>
            <div class="mt-3">
              <a href="{% url 'basic_stats' %}" class="btn btn-sm btn-primary">查看分析</a>
            </div>
          </div>
        </div>
      </div>
      <div class="col-sm-6 col-lg-3">
        <div class="card card-sm">
          <div class="card-body">
            <div class="row align-items-center">
              <div class="col-auto">
                <span class="bg-green text-white avatar">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-activity"
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    stroke-width="2"
                    stroke="currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                    <path d="M3 12h4l3 8l4 -16l3 8h4"></path>
                  </svg>
                </span>
              </div>
              <div class="col">
                <div class="font-weight-medium">兴趣爱好分析</div>
                <div class="text-muted">体育、音乐等兴趣分布</div>
              </div>
            </div>
            <div class="mt-3">
              <a href="{% url 'interest_analysis' %}" class="btn btn-sm btn-primary">查看分析</a>
            </div>
          </div>
        </div>
      </div>
      <div class="col-sm-6 col-lg-3">
        <div class="card card-sm">
          <div class="card-body">
            <div class="row align-items-center">
              <div class="col-auto">
                <span class="bg-purple text-white avatar">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-mood-smile"
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    stroke-width="2"
                    stroke="currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                    <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
                    <path d="M9 10l.01 0"></path>
                    <path d="M15 10l.01 0"></path>
                    <path d="M9.5 15a3.5 3.5 0 0 0 5 0"></path>
                  </svg>
                </span>
              </div>
              <div class="col">
                <div class="font-weight-medium">性格特质分析</div>
                <div class="text-muted">个性特征的分布与关联</div>
              </div>
            </div>
            <div class="mt-3">
              <a href="{% url 'personality_analysis' %}" class="btn btn-sm btn-primary">查看分析</a>
            </div>
          </div>
        </div>
      </div>
      <div class="col-sm-6 col-lg-3">
        <div class="card card-sm">
          <div class="card-body">
            <div class="row align-items-center">
              <div class="col-auto">
                <span class="bg-red text-white avatar">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-link"
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    stroke-width="2"
                    stroke="currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                    <path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path>
                    <path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path>
                  </svg>
                </span>
              </div>
              <div class="col">
                <div class="font-weight-medium">相关性分析</div>
                <div class="text-muted">不同维度间的相关性</div>
              </div>
            </div>
            <div class="mt-3">
              <a href="{% url 'correlation_analysis' %}" class="btn btn-sm btn-primary">查看分析</a>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 平台预览图 -->
    <div class="row mb-4">
      <div class="col-12">
        <div class="card">
          <div class="card-header">
            <h3 class="card-title">平台预览</h3>
          </div>
          <div class="card-body">
            <div class="row">
              <div class="col-md-6 col-lg-4 mb-3">
                <div class="card card-sm">
                  <div class="card-status-top bg-blue"></div>
                  <div class="card-body">
                    <h4>基础统计展示</h4>
                    <p class="text-muted">直观的图表展示用户基本特征分布</p>
                    <div class="text-center"></div>
                  </div>
                </div>
              </div>
              <div class="col-md-6 col-lg-4 mb-3">
                <div class="card card-sm">
                  <div class="card-status-top bg-green"></div>
                  <div class="card-body">
                    <h4>兴趣分布分析</h4>
                    <p class="text-muted">多维度展示用户兴趣偏好分布</p>
                    <div class="text-center"></div>
                  </div>
                </div>
              </div>
              <div class="col-md-6 col-lg-4 mb-3">
                <div class="card card-sm">
                  <div class="card-status-top bg-purple"></div>
                  <div class="card-body">
                    <h4>相关性热力图</h4>
                    <p class="text-muted">发现不同维度之间的关联关系</p>
                    <div class="text-center"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    {% else %}
    <!-- 未登录用户显示的内容 -->
    <div class="row mb-4">
      <div class="col-12">
        <div class="card">
          <div class="card-body">
            <div class="text-center py-4">
              <div class="mb-3">
                <span class="avatar avatar-xl bg-blue-lt rounded-circle mb-3">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-user"
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    stroke-width="2"
                    stroke="currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                    <path d="M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0"></path>
                    <path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2"></path>
                  </svg>
                </span>
              </div>
              <h3 class="text-muted mb-3">登录后体验完整功能</h3>
              <p class="text-muted mb-4">
                请登录您的账户，体验数据分析平台的全部功能。<br />
                如果您还没有账户，可以立即注册一个新账户。
              </p>
              <div class="btn-list justify-content-center">
                <a href="{% url 'login' %}" class="btn btn-primary">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-login"
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    stroke-width="2"
                    stroke="currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                    <path d="M14 8v-2a2 2 0 0 0 -2 -2h-7a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h7a2 2 0 0 0 2 -2v-2"></path>
                    <path d="M20 12h-13l3 -3m0 6l-3 -3"></path>
                  </svg>
                  登录
                </a>
                <a href="{% url 'signup' %}" class="btn btn-outline-primary">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-user-plus"
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    stroke-width="2"
                    stroke="currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                    <path d="M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0"></path>
                    <path d="M16 19h6"></path>
                    <path d="M19 16v6"></path>
                    <path d="M6 21v-2a4 4 0 0 1 4 -4h4"></path>
                  </svg>
                  注册
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 平台功能预览 - 非登录用户也可以看到 -->
    <div class="row">
      <div class="col-12">
        <h2 class="mt-3 mb-4">平台功能预览</h2>
      </div>
      <div class="col-md-4">
        <div class="card">
          <div class="card-body">
            <h3 class="card-title">用户行为分析</h3>
            <p>通过多维度的数据分析，深入了解用户行为模式和兴趣偏好，为决策提供数据支持。</p>
            <ul class="list-unstyled">
              <li class="py-1">✓ 用户基础数据统计</li>
              <li class="py-1">✓ 兴趣爱好分布分析</li>
              <li class="py-1">✓ 行为特征聚类</li>
            </ul>
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="card">
          <div class="card-body">
            <h3 class="card-title">数据可视化</h3>
            <p>丰富的可视化图表，直观展示数据分布和趋势，帮助您快速理解复杂的数据关系。</p>
            <ul class="list-unstyled">
              <li class="py-1">✓ 多样化图表类型</li>
              <li class="py-1">✓ 交互式数据探索</li>
              <li class="py-1">✓ 自定义图表配置</li>
            </ul>
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="card">
          <div class="card-body">
            <h3 class="card-title">相关性分析</h3>
            <p>发现不同维度数据之间的关联关系，挖掘数据背后的深层价值和潜在规律。</p>
            <ul class="list-unstyled">
              <li class="py-1">✓ 相关性热力图</li>
              <li class="py-1">✓ 因子分析</li>
              <li class="py-1">✓ 预测模型构建</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    {% endif %}
  </div>
</div>
{% endblock %}
